<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button style="margin-left:10px" class="add_field_button btn">Add</button>
		<div class="input_fields_wrap"></div>

		<script src="js/jquery-3.5.0.js"></script>
		<script>
			var max_fields = 5; //maximum input boxes allowed 
			var wrapper = $(".input_fields_wrap"); //Fields wrapper 
			var add_button = $(".add_field_button"); //Add button ID 

			var x = 1; //initlal text box count 
			add_button.click(function(e) { //on add input button click 
				e.preventDefault();
				// if (x < max_fields) {
					x++;
					wrapper.append('<tr style=""><td></td><td><button class="remove_field btn">Del</button></td></tr>'); //add input box 
				// }
			});

			$(wrapper).on("click", ".remove_field", function(e) { //user click on remove text 
				e.preventDefault();
				$(this).closest('tr').remove();
				x--;
			})
		</script>
	</body>
</html>
